<template>
    <div>
        <el-form :model="form" :rules="rules" label-position="right" ref="form" label-width="160px">
            <el-form-item label="用户账号：" prop="cm_username">
                <el-col :span="8">
                    <el-input v-model="form.cm_username" placeholder="请输入用户昵称" disabled></el-input>
                </el-col>
            </el-form-item>
            <el-form-item label="用户密码：" prop="cm_password">
                <el-col :span="8">
                    <el-input v-model="form.cm_password" placeholder="请输入用户密码"></el-input>
                </el-col>
            </el-form-item>
            <el-form-item label="用户昵称：" prop="cm_nickname">
                <el-col :span="8">
                    <el-input v-model="form.cm_nickname" placeholder="请输入用户昵称"></el-input>
                </el-col>
            </el-form-item>
            <el-form-item label="用户QQ：" prop="cm_qq">
                <el-col :span="8">
                    <el-input v-model="form.cm_qq" placeholder="请输入用户QQ"></el-input>
                </el-col>
            </el-form-item>
            <el-form-item label="用户微信：" prop="cm_weixin">
                <el-col :span="8">
                    <el-input v-model="form.cm_weixin" placeholder="请输入用户微信"></el-input>
                </el-col>
            </el-form-item>
            <el-form-item label="用户邮箱：" prop="cm_email">
                <el-col :span="8">
                    <el-input v-model="form.cm_email" placeholder="请输入用户邮箱"></el-input>
                </el-col>
            </el-form-item>
            <el-form-item label="用户电话：" prop="cm_phone">
                <el-col :span="8">
                    <el-input v-model="form.cm_phone" placeholder="请输入用户电话"></el-input>
                </el-col>
            </el-form-item>

            <el-col :span="24" v-if="customModelData.length > 0">
                <div class="customFieldInput">
                    自定义模型设置（该部分为自定义模型部分，如果没有自定义模型，则不会显示）
                </div>
            </el-col>
            <el-form-item :label="'自定义模型 ' + (index+1) + ' :'" v-for="item,index in customModelData">
                <el-col :span="8">
                    <el-input type="textarea" rows="4" v-model="form[item.COLUMN_NAME]"
                              :placeholder="item.COLUMN_COMMENT + '，数据类型：' + (item.DATA_TYPE == 'varchar' ? '文本' : '数字')"></el-input>
                    <span class="fieldCommentHint">{{item.COLUMN_COMMENT}}</span>
                </el-col>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="submitForm('form')">提交</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    import {mapState, mapMutations} from 'vuex'

    export default {
        //数据源
        data() {
            return {
                rules: {
                    cm_nickname: [
                        {required: true, message: "用户昵称不能为空", trigger: "blur"}
                    ]
                }
            }
        },
        //初始化函数
        mounted() {
            this.initData();
            this.getCustomField();
        },
        //计算属性
        computed: {
            ...mapState({
                form: state => state.EditMemberModule.form,
                customModelData: state => state.EditMemberModule.customModelData,
            })
        },
        //组件方法
        methods: {
            initData() {
                this.$myLoading.startLoading();
                this.$http.getHttp(
                    this.$API.cmsMemberSearch + "/cm_id/" + this.$route.query.cm_id,
                    rs => {
                        this.$store.commit("EditMemberModule/updateForm", rs.data[0]);
                        this.$myLoading.endLoading();
                    }
                );
            },
            getCustomField() {
                var params = {
                    appKey: 'easyd_cms',
                    tableName: "easyd_cms_member"
                }

                this.$myLoading.startLoading()
                this.$http.postHttp(
                    this.$API.modelManagerGetCustomModel,
                    params,
                    rs => {
                        this.$store.commit('EditMemberModule/updateCustomModelData', rs)
                        this.$myLoading.endLoading()
                    }
                )
            },
            submitForm(form) {

                this.$refs[form].validate(valid => {
                    if (valid) {
                        this.form.update_where = "cm_id";
                        this.$myLoading.startLoading();
                        this.$http.postHttp(this.$API.cmsMemberUpdate, this.form, rs => {
                            this.$myLoading.endLoading();
                            this.$myPop.SuccessMessage();

                            setTimeout(() => {
                                history.go(-1);
                            }, 1000);
                        });
                    }
                });
            },
        }
    }
</script>

<style lang="stylus" scoped>
    @import '~PUBLIC_CSS';
    .customFieldInput {
        width 100%
        height 40px
        background #eee
        margin-bottom 30px
        padding-left 20px
        box-sizing border-box
    }

    .fieldCommentHint {
        color red
    }
</style>